<template>
  <div class="app-container">
    <div
      style="
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 20px;
      "
    >
      <div>
        <span
          style="
            font-size: 14px;
            color: #606266;
            font-weight: 700;
            margin-right: 12px;
          "
          >学生姓名</span
        >
        <el-input
          v-input-restrict
          size="small"
          class="search_item"
          v-model="queryParams.name"
          placeholder="请输入学生姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </div>
      <div>
        <span
          style="
            font-size: 14px;
            color: #606266;
            font-weight: 700;
            margin-right: 12px;
          "
          >课程</span
        >
        <el-select
          filterable
          clearable
          size="small"
          class="search_item"
          v-model="queryParams.courseId"
          clearable
          placeholder="请选择课程"
        >
          <el-option
            v-for="item in courseList"
            :key="item.courseId"
            :label="item.courseName"
            :value="item.courseId"
          >
          </el-option>
        </el-select>
      </div>
      <el-button
        v-preventReClick
        type="primary"
        icon="el-icon-search"
        size="mini"
        @click="handleQuery"
        >搜索</el-button
      >
      <el-button
        v-preventReClick
        icon="el-icon-refresh"
        size="mini"
        @click="resetQuery"
        >重置</el-button
      >
    </div>

    <el-table v-loading="loading" :data="studentList">
      <el-table-column label="学号" align="center" prop="studentNum" />
      <el-table-column label="姓名" align="center" prop="studentName" />
      <el-table-column
        :label="`${$gradeName ? $gradeName : '班级'}`"
        align="center"
        prop="className"
      />
      <el-table-column
        :label="`${$courseName ? $courseName : '课程'}——${
          $workstationName ? $workstationName : '工作站'
        }`"
        align="center"
        prop="status"
      >
        <template slot-scope="scope">
        {{ scope.row.courseName }}——{{ scope.row.workstationName?scope.row.workstationName:'暂无' }}
        </template>
      </el-table-column>
      <el-table-column label="主讲老师" align="center" prop="principalName" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-thumb"
            @click="handlePassTheRemainingLevels(scope.row)"
            >通过剩余关</el-button
          >
          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-delete"
            style="color: #e95756"
            @click="handleResetKickOut(scope.row)"
            >重置踢出</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="title"
      :visible="open"
      width="500px"
      append-to-body
      @close="cancel"
    >
      <div style="display: flex">
        <div
          style="
            width: 40px;
            font-size: 14px;
            color: #606266;
            font-weight: 700;
            margin-right: 12px;
          "
        >
          原因:
        </div>
        <el-input
          v-input-restrict
          maxlength="500"
          show-word-limit
          :rows="5"
          :autosize="{ minRows: 5, maxRows: 8 }"
          v-model="reason"
          type="textarea"
          placeholder="请输入原因"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-preventReClick type="primary" @click="submitForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPost_course } from "@/api/course/course";
import {
  resetKickOut,
  finishCourse,
  studentStudyList,
} from "@/api/course/handel";

export default {
  name: "Post",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      // 遮罩层
      loading: false,
      //重置踢出&&通过剩余关
      open: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 岗位表格数据
      studentList: [],
      // 课程列表数据
      courseList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        courseId: "",
      },
      reason: "",
      title: "",
      studentId: "",
      workstationId: "",
      courseId: "",
      courseSchedulingId: "",
    };
  },
  activated() {},
  created() {
    this.getList();
    this.getCourseList();
  },
  methods: {
    submitForm() {
      if (!this.reason) {
        this.$modal.msgWarning("请输入原因");
        return;
      }
      let formData = new FormData();
      formData.append("reason", this.reason);
      formData.append("courseSchedulingId", this.courseSchedulingId);
      formData.append("studentId", this.studentId);
      formData.append("courseId", this.courseId);
      formData.append("workstationId", this.workstationId);
      if (this.title == "重置踢出") {
        resetKickOut(formData).then((response) => {
          this.open = false;
          this.reason = "";
          this.$modal.msgSuccess("操作成功");
          this.getList()
        });
      } else {
        finishCourse(formData).then((response) => {
          this.open = false;
          this.reason = "";
          this.$modal.msgSuccess("操作成功");
          this.getList()
        });
      }
    },
    cancel() {
      this.reason = "";
      this.open = false;
    },
    getCourseList() {
      let params = {
        pageNum: 1,
        pageSize: 999,
        status: 0,
      };
      listPost_course(params).then((response) => {
        this.courseList = response.rows;
      });
    },
    /** 查询学生列表 */
    getList() {
      this.loading = true;
      // 如果url带班级id
      studentStudyList(this.queryParams)
        .then((response) => {
          this.studentList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handlePassTheRemainingLevels(row) {
      this.studentId = row.studentId;
      this.courseId = row.courseId;
      this.courseSchedulingId = row.courseSchedulingId;
      this.title = "通过剩余关";
      this.open = true;
    },
    handleResetKickOut(row) {
      this.studentId = row.studentId;
      this.courseId = row.courseId;
      this.courseSchedulingId = row.courseSchedulingId;
      this.title = "重置踢出";
      this.open = true;

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: "",
        courseId: "",
      };
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.search_item {
  width: 215px;
  margin-right: 12px;
}
</style>
